<template>
  <div class="file-selector fixed flex justify-center items-center flex-col" v-if="visible">
    <a-card class="wrapper w-[80vw] overflow-y-auto">
      <div class="flex justify-between items-center mb-4">
        <div class="text-[1.5rem] font-bold">{{ t('选择素材') }}</div>
        <div class="system__icon" @click="visible = !visible">
          <CloseOutlined />
        </div>
      </div>
      <a-card class="mb-4">
        <div class="flex gap-6 flex-col mb-4">
          <div>
            <div class="flex justify-between items-center">
              <a-button @click="listLibrary" :loading="table.loading">{{ t('刷新') }}</a-button>
              <a-button type="primary" @click="confirm" :disabled="!selected">
                {{ t('确定') }}
              </a-button>
            </div>
          </div>
          <div class="flex gap-12">
            <span>{{ t('素材尺寸') }}</span>
            <LibrarySizeOptions v-model="query.sizeId" @change="listLibrary"></LibrarySizeOptions>
          </div>
          <div class="flex gap-12">
            <div>{{ t('素材名称') }}</div>
            <a-input-search
              allow-clear
              v-model:value="query.name"
              class="w-fit"
              @search="search"
            ></a-input-search>
          </div>
        </div>
      </a-card>
      <a-card>
        <ul class="flex-1 grid grid-cols-6" v-if="table.data.length > 0">
          <li
            v-for="item in table.data"
            :key="item.resId"
            @click="selectItem(item)"
            @dblclick="confirm"
            class="cursor-pointer w-full"
          >
            <File :item="item" :class="{ selected: item.resId === activeId }"></File>
          </li>
        </ul>
        <a-empty v-else />
      </a-card>
      <div class="mt-4">
        <a-pagination
          v-model:current="query.pageNum"
          :page-size="query.pageSize"
          :total="query.total"
          size="small"
          @change="onChange"
          responsive
          showLessItems
        ></a-pagination>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { libraryList, type Library } from '@/api/modules/data/library';
import type { LIBRARY_ENUM } from '@/enum/system';
import { useQuery, useTable } from '@/hooks/table';
import { CloseOutlined } from '@ant-design/icons-vue';

const { t } = useI18n();
const visible = defineModel<boolean>('visible');
const selected = defineModel<string>('selected');
const activeId = defineModel<string>('activeId');
const emit = defineEmits(['select']);
const query = useQuery<Library>({
  name: '',
  sizeId: '',
  pageSize: 3 * 6,
});
const table = useTable<Library>();

const listLibrary = async () => {
  table.value.loading = true;
  const { data } = await libraryList(query.value);
  table.value.data = data.rows;
  table.value.loading = false;
  query.value.total = data.total;
};

const search = () => {
  query.value.pageNum = 1;
  listLibrary();
};

const onChange = (page: number, pageSize: number) => {
  query.value.pageSize = pageSize;
  query.value.pageNum = page;
  listLibrary();
};

const selectItem = (item: Library) => {
  selected.value = item.uri;
  activeId.value = item.resId;
};

const confirm = () => {
  visible.value = false;
  emit('select', selected.value);
};
const props = defineProps<{
  type: LIBRARY_ENUM;
}>();

watch(
  props,
  () => {
    query.value.type = props.type;
    listLibrary();
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.file-selector {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: var(--opacity-background);

  .wrapper {
    min-height: 80vh;
  }
}

.selected {
  outline: 1px solid var(--primary);
  border-radius: var(--radius);
}
</style>
